<template>
  <div>
    <!-- Vue-router  
      router-link 导航链接
      router-view 路由出口，挖坑占位
    -->
    <!-- 点击a标签，url修改，vue监听匹配路由规则，切换组件模块 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-link to="/article">文章</router-link>
    <router-link to="/list">列表</router-link>
    <!-- 从login页 到 文章页 传参 -->

    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>
a{
  display: inline-block;
  margin-right: 10px;
}
/* 导航高亮的样式 */
.router-link-active {
  color:red !important;
}
</style>